<!DOCTYPE html>
<html lang="en">
  <head>
    <% include header.html %>
  </head>

  <body>

    <% include nav.html %>

    <div class="container">
      <div class="row" id="message">
        <div class="col-md-12">
            <div class="alert alert-info fade in">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                你有新的订单！<a href="/dealer/manageOrder">查看&gt;&gt;</a>
            </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs nav-justified">
                <li><a href="/dealer/manageOrder">订单管理</a></li>
                <li class="active"><a href="#">商品管理</a></li>
                <li><a href="#">交易统计</a></li>
                <li><a href="/shop/settings">商店设置</a></li>
                <li><a href="/user/security">安全设置</a></li>
            </ul>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
            <div class="tool-bar">
              <div class="tool-item">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#itemModal" action="add"><span class="glyphicon glyphicon-plus"></span> 添加商品</button>
              </div>
            </div>
        </div>
      </div>
      <div class="row">
        <div class="content">
            <div class="col-md-12">
                <table class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>编号</th>
                      <th>名称</th>
                      <th>类型</th>
                      <th>价格</th>
                      <th>送货时间</th>
                      <th>描述</th>
                      <th>状态</th>
                      <th>管理</th>
                    </tr>
                  </thead>
                  <tbody id="itemList">
                    <% for(var i = 0; i < itemList.length; i++) { %>
                    <tr>
                      <td><%= itemList[i].id %></td>
                      <td><%= itemList[i].name %></td>
                      <td><%= itemList[i].cname %></td>
                      <td><%= itemList[i].price %>元</td>
                      <td><%= itemList[i].deliver_time %></td>
                      <td><%= itemList[i].description %></td>
                      <td><%= itemList[i].state %></td>
                      <td>
                        <button type="button" action="edit" data-id="<%= itemList[i].id %>" data-action="update" class="btn btn-primary btn-xs">
                          <span class="glyphicon glyphicon-edit"></span> 编辑
                        </button>
                        <% if (itemList[i].state === '上架') { %>
                        <button type="button" action="offshelf" data-id="<%= itemList[i].id %>" class="btn btn-danger btn-xs">
                          <span class="glyphicon glyphicon-arrow-down"></span> 下架
                        </button>
                        <% } else { %>
                        <button type="button" action="onshelf" data-id="<%= itemList[i].id %>" class="btn btn-success btn-xs">
                        <span class="glyphicon glyphicon-arrow-up"></span> 上架
                        </button>
                        <% } %>
                      </td>
                    </tr>
                    <% } %>
                  </tbody>
                </table>
            </div>
        </div>
      </div>
<!-- Modal -->
  <div class="modal fade" id="itemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">添加商品</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label for="itemName" class="col-sm-2 control-label">商品名称</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="itemName" placeholder="请输入商品名称">
              </div>
            </div>
            <div class="form-group">
              <label for="itemType" class="col-sm-2 control-label">商品类型</label>
              <div class="col-sm-10">
                <select id="itemCategory" class="form-control">
                  <option value="1">中餐</option>
                  <option value="2">西餐</option>
                  <option value="3">饮品</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="itemPrice" class="col-sm-2 control-label">商品价格</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="itemPrice" placeholder="请输入商品价格">
              </div>
            </div>
            <div class="form-group">
              <label for="itemDescription" class="col-sm-2 control-label">商品描述</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="itemDescription" placeholder="请简要描述商品">
              </div>
            </div>
            <div class="form-group">
              <label for="itemDescription" class="col-sm-2 control-label">送货时间</label>
              <div class="col-sm-4">
                <select class="form-control" id="itemSTime">
                  <option>6:00</option>
                  <option>7:00</option>
                  <option>8:00</option>
                  <option>9:00</option>
                  <option>10:00</option>
                  <option>11:00</option>
                  <option>12:00</option>
                  <option>13:00</option>
                  <option>14:00</option>
                  <option>15:00</option>
                  <option>16:00</option>
                  <option>17:00</option>
                  <option>18:00</option>
                  <option>19:00</option>
                  <option>20:00</option>
                  <option>21:00</option>
                  <option>22:00</option>
                  <option>23:00</option>
                </select>
              </div>
              <div class="col-sm-2">
                <div class="text-center">------</div>
              </div>
              <div class="col-sm-4">
                <select class="form-control" id="itemETime">
                  <option>6:00</option>
                  <option>7:00</option>
                  <option>8:00</option>
                  <option>9:00</option>
                  <option>10:00</option>
                  <option>11:00</option>
                  <option>12:00</option>
                  <option>13:00</option>
                  <option>14:00</option>
                  <option>15:00</option>
                  <option>16:00</option>
                  <option>17:00</option>
                  <option>18:00</option>
                  <option>19:00</option>
                  <option>20:00</option>
                  <option>21:00</option>
                  <option>22:00</option>
                  <option>23:00</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="itemPic" class="col-sm-2 control-label">商品图片</label>
              <div class="col-sm-5">
                <input id="itemPic" class="form-control" type="file" name="files[]" data-url="/file/upload">
              </div>
              <div class="col-sm-5">
                <div class="progress">
                <div id="progressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-12 item-img" id="imgdiv">
                <img src="" alt="商品图片">
              </div>
            </div>
          </form>        
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" id="addItemBtn" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>

    <% include footer.html %>

    <script type="text/javascript" src="/static/js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="/static/js/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="/static/js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="/static/js/dealer.js"></script>
    <script type="text/javascript">
      var items = <%- JSON.stringify(itemList) %>;
    </script>
  </body>
</html>